<template>
    <div class="total-box">

        <div class="total-box-body">
            <div class="total-box-body-main">


                <div class="body-header">

                    <div>
                        <el-date-picker v-model="data_value" type="datetimerange" range-separator="To"
                            start-placeholder="Start date" end-placeholder="End date" />
                    </div>
                    <el-select v-model="selectvalue" class="m-2" placeholder="全部类型" style="margin-left: 10px;">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                    <div class="body-header-search" style="margin: 0px 10px;">

                        <div style="min-width: 300px;">
                            <el-input v-model="input" placeholder="请输入搜索内容" class="input-with-select">
                                <template #prepend>
                                    <el-select v-model="select" placeholder="手机号" style="width: 115px">
                                        <el-option label="手机号" value="手机号" />
                                        <el-option label="姓名" value="姓名" />
                                        <el-option label="昵称" value="昵称" />
                                        <el-option label="会员卡号" value="会员卡号" />
                                        <el-option label="订单编号" value="订单编号" />
                                    </el-select>
                                </template>
                                <template #append>
                                    <el-button :icon="Search" />
                                </template>
                            </el-input>
                        </div>
                    </div>
                    <div style="display: flex;justify-content: right;min-width: 40%;">
                        <div></div>
                        <div>
                            <el-button type="primary">查询</el-button>
                            <el-button type="primary">重置</el-button>
                        </div>
                    </div>
                </div>
                <div class="body-main">
                    <div style="width: 98%;margin: 10px 0px;">
                        <el-table  border :data="tableData"
                            :default-sort="{ prop: 'date', order: 'descending' }">
                            <el-table-column label="用户信息">
                                <template #default="scope">
                                    <div style="display: flex; align-items: center">
                                        <div style="width: 50px;height: 50px;">
                                            <img :src=scope.row.photo style="width: 100%;height: 50px;"><img>
                                        </div>
                                        <div>
                                            <div style="margin-left: 10px">用户昵称:{{ scope.row.nickname }}</div>
                                            <div style="margin-left: 10px">{{ scope.row.vipcard }}</div>
                                        </div>

                                    </div>
                                </template>
                            </el-table-column>

                            <el-table-column prop="rechargeAmount" label="充值金额">
                                <template #default="scope">
                                    <span>
                                        ￥
                                    </span>
                                    <span>{{ scope.row.balance }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="rechargeType" label="充值类型" />
                            <el-table-column prop="operator" label="操作员" />
                            <el-table-column prop="number" label="订单编号" />
                            <el-table-column prop="time" label="下单时间" />
                            <el-table-column prop="remark" label="备注" />
                            <el-table-column label="操作">
                                <template #default="scope">
                                    <div style="display: flex; align-items: center">
                                        <el-text style="margin-right: 10px; cursor: pointer;" class="mx-1" type="primary"
                                            @click="xiangqing">详情
                                        </el-text>

                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <div class="demo-pagination-block">

                        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                            :page-sizes="[5, 10, 100, 200]" :small="small" :disabled="disabled" :background="background"
                            layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                            @current-change="handleCurrentChange" />
                    </div>
                </div>
            </div>
        </div>
    </div>
    
</template>
 
    
<script setup lang="ts">
import { ref } from 'vue'
import { reactive } from 'vue';
import { ElLoading } from 'element-plus'
import type { TableColumnCtx } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import { ElMessageBox } from 'element-plus'
import router from '@/router';

import { getchongzhiinfo } from '../../api/membersettingApi'

interface User {
    id: number
    name: string
    vipcard: string
    photo: string
    number: number
    rechargeType: string
    operator: string
    balance: number
    time: string
    remark: string
    nickname: string

}

const loading= ref(true)
const input = ref('')
const select = ref('')
const currentPage = ref(1)
const pageSize = ref(5)

const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const data_value = ref('')
const selectvalue = ref('')
const handleSizeChange = (val: number) => {
    getdata()
}
const handleCurrentChange = (val: number) => {
    getdata()
}
const xiangqing = () => {
    router.push('/home/ChongZhiXiangQing')
}
const kaiguan=ref(false)
const handleClose = (done: () => void) => {
    done()
}
let getdata = async () => {

    let getinfo = await getchongzhiinfo({
        page:currentPage.value,
        limit:pageSize.value,
   /*  startTime:'string',
    endTime:'string',
    rechargeType:'string',
    number:number,
    name:'string'
    nickname:'string'
    phone:'string'
    vipcard:'string' */
    })
    if (getinfo.data.code==0) {
        tableData.length = 0
        tableData.push(...getinfo.data.data)
        kaiguan.value=true
 

        total.value=getinfo.data.count
    }
}

getdata()

interface SpanMethodProps {
    row: User
    column: TableColumnCtx<User>
    rowIndex: number
    columnIndex: number
}

const tableData: User[] = reactive([
    {
        id: 1,
        name: '2哥',
        vipcard: '123',
        photo: 'assss',
        number: 100,
        rechargeType: '会员充值',
        operator: '小五',
        balance: 1,
        time: "2023-04-01",
        remark: '无',
        nickname: 'oldtwo'
    },

])

const total = ref(1)

const options = [
    {
        value: '会员充值',
        label: '会员充值',
    },
    {
        value: '商家充值',
        label: '商家充值',
    },
]

const edit = reactive(
    () => {
        console.log(2);
    })
const recharge = reactive(
    () => {
        console.log(3);
    })





watch(() => tableData, val => {
    if (val) {
        getdata()
        console.log(tableData)
        console.log('更新了数据');
    }


})
</script>
 
 
<style scoped>
.body-header {
    height: 42.8px;


    display: flex;


}

.body-main {
    height: 90%;
    width: 100%;


}

.body-header-search {

    display: flex;
}





.input-with-select .el-input-group__prepend {
    background-color: var(--el-fill-color-blank);
}

:deep(.el-breadcrumb) {
    line-height: 45px;
    font-size: 16px;
}

.table {
    width: 100%;
    text-align: center;
    border: 1px solid #D5D5D5;
    border-collapse: collapse;
}

thead {
    font-size: 1em;
    background-color: #FAFAFA;
    border: none;
}

td {
    border: 1px solid #E8E8E8;
}
</style>
 